<template>
  <div class="dashboard-container ">
    <div class="dashboard-header">
      <img src="@/assets/images/top-bg.png" alt="top background" class="top-bg">
      <div class="header-title"> 探测扫描子系统</div>
      <div class="back-btn" @click="$router.push('/globalScan')">
        <i class="el-icon-back"></i>
      </div>
    </div>
    <div class="dashboard-main">
      <div class="earth-container">
        <img src="@/assets/images/earth.png" alt="earth" class="earth-image">
      </div>
      <div class="bottom-space">
        <!-- 预留的底部空间 -->
        <div class="bottom-space-title">
          <div class="bottom-space-title-left"></div>
          <div class="bottom-space-title-right">
            <div class="bottom-space-title-item" @click="dialogVisible = true">
              <img src="@/assets/images/add.png" alt="">
              <div>添加</div>
            </div>
            <div class="bottom-space-title-item delete">
              <img src="@/assets/images/delete.png" alt="">
              <div>删除</div>
            </div>
          </div>
        </div>
        <div class="bottom-space-card-container">
          <div v-for="(node, index) in nodes" :key="index"
            :class="['bottom-space-card', { active: selectedNode === index }]" @click="selectNode(index)">
            <div class="close-btn" @click.stop="deleteNodeFn(index)">×</div>
            <div class="card-content">
              <div class="card-title" :title="node.name">
                <span class="title-text">{{ node.name }}</span>
              </div>
              <img src="@/assets/images/triangle.png" alt="">
            </div>
          </div>
        </div>

        <!-- 添加节点弹窗 -->
        <el-dialog title="添加节点" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
          <el-form :model="form">
            <el-form-item label="节点名称">
              <el-input v-model="form.nodeName" placeholder="请输入节点名称"></el-input>
            </el-form-item>
            <el-form-item label="IP地址">
              <el-input v-model="form.ip" placeholder="请输入IP地址"></el-input>
            </el-form-item>
            <el-form-item label="端口">
              <el-input v-model="form.port" placeholder="请输入端口"></el-input>
            </el-form-item>
            <el-form-item label="用户名">
              <el-input v-model="form.userName" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="form.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="租期">
              <el-input v-model="form.expire" placeholder="请输入租期"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addNodeFn">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
    <div class="dashboard-footer">
      <img src="@/assets/images/img_bottom.png" alt="bottom background" class="bottom-bg">
    </div>
  </div>
</template>

<script>
import { addNode, deleteNode, getNodeList,catNode } from '@/api/index'
export default {
  name: "Index",
  data() {
    return {
      nodes: [],
      selectedNode: null,
      dialogVisible: false,
      form: {
        nodeName: '',
        ip: '',
        port: '',
        userName: '',
        password: '',
        expire: ''
      }
    }
  },
  mounted() {
    // 获取节点列表
    this.getNodeList();
  },
  methods: {
    // 选择节点
    selectNode(index) {
      this.selectedNode = index;
      // 跳转到全球扫描页面
      this.$router.push('/globalScan');
    },
    // 删除节点
    deleteNodeFn(index) {
      const node = this.nodes[index];
      if (!node || !node.id) {
        this.$message.error('节点ID不存在');
        return;
      }

      this.$confirm('确认删除该节点吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(index);
        deleteNode(node).then(response => {

          this.nodes.splice(index, 1);
          if (this.selectedNode === index) {
            this.selectedNode = null;
          } else if (this.selectedNode > index) {
            this.selectedNode--;
          }
          this.$message({
            type: 'success',
            message: '删除成功'
          });
        }).catch(error => {
          this.$message.error('删除失败：' + error.message);
        });
      }).catch(() => {
        // 取消删除操作
      });
    },
    // 获取节点列表
    getNodeList() {
      getNodeList().then(response => {
        console.log(response);
        this.nodes = response.rows || [];
      }).catch(error => {
        this.$message.error('获取节点列表失败：' + error.message);
      });
    },
    // 添加节点
    addNodeFn() {
      if (!this.form.nodeName) {
        this.$message.warning('请输入节点名称');
        return;
      }

      addNode({ name: this.form.nodeName }).then(response => {
        this.getNodeList(); // 重新获取节点列表
        this.dialogVisible = false;
        this.form.nodeName = '';
        this.$message({
          type: 'success',
          message: '添加成功'
        });
      }).catch(error => {
        this.$message.error('添加失败：' + error.message);
      });
    }
  }
}
</script>

<style scoped lang="scss">
.dashboard-container {

  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: url('~@/assets/images/bg.png') no-repeat center center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  z-index: 1;

  .dashboard-header {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    .top-bg {
      width: 100%;
      height: auto;
    }

    .header-title {
      position: absolute;
      color: #fff;
      font-size: 36px;
      font-weight: bold;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }

    .back-btn {
      position: absolute;
      right: 30px;
      top: 50%;
      transform: translateY(-50%);
      color: #66FFFF;
      font-size: 15px;
      cursor: pointer;
      width: 15px;
      height: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;

      &:hover {
        color: rgba(102, 255, 255, 0.7);
      }

      i {
        font-size: 15px;
        line-height: 15px;
      }
    }
  }

  .dashboard-main {
    width: 1980px;
    height: 820px;
    position: relative;
    background-color: rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    padding: 20px;
    color: #fff;
    font-size: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0;

    .earth-container {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;

      .earth-image {
        width: auto;
        height: 500px; // 可以根据需要调整大小
        object-fit: contain;
      }
    }

    .bottom-space {
      height: 250px; // 调整高度以适应3行卡片加上标题区域
      width: 100%;
      display: flex;
      flex-direction: column;
    }
  }

  .dashboard-footer {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;

    .bottom-bg {
      width: 100%;
      height: auto;
    }
  }

  .bottom-space-title {
    padding: 0 2.8%;

    display: flex;
    justify-content: space-between;
    margin-top: 32px;

    img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }

    .bottom-space-title-left {}

    .bottom-space-title-right {
      display: flex;
      align-items: center;
    }

    .bottom-space-title-item {
      display: flex;
      align-items: center;
      color: #66FFFF;
      font-size: 16px;
      margin-left: 32px;

      &.delete {
        color: #FF6666;
      }

      &:hover {
        cursor: pointer;
      }
    }
  }

  .bottom-space-card-container {
    margin-top: 20px;
    padding: 0 2.8%;
    padding-right: 1.8%;
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    overflow-y: auto;
    max-height: calc((56px + 25px) * 3 - 25px);
    /* 每行高度56px(卡片) + 25px(间距), 3行, 最后减去多余的间距 */
    align-content: flex-start;

    /* 自定义滚动条样式 */
    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.1);
      border-radius: 3px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(102, 255, 255, 0.3);
      border-radius: 3px;

      &:hover {
        background: rgba(102, 255, 255, 0.5);
      }
    }

    .bottom-space-card {
      padding: 17px 20px;
      background: rgba(4, 28, 56, 0.90);
      border: 1px solid rgba(13, 61, 127, 1);
      color: #fff;
      width: 240px;
      position: relative;

      .close-btn {
        position: absolute;
        top: -1px;
        right: -1px;
        width: 20px;
        height: 20px;
        background: #FF6666;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 12px;
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.3s;
      }

      &:hover .close-btn {
        opacity: 1;
      }

      .card-content {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .card-title {
          font-size: 24px;
          margin-right: 20px;
          max-width: 160px;

          .title-text {
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        img {
          height: 16px;
          width: 10px;
        }
      }

      &.active {
        background-image: linear-gradient(180deg, rgba(71, 174, 255, 0.90) 1%, rgba(0, 68, 173, 0.90) 100%);
        border: 1px solid rgba(102, 255, 255, 1);
      }

      &:hover {
        cursor: pointer;
        background-image: linear-gradient(180deg, rgba(71, 174, 255, 0.90) 1%, rgba(0, 68, 173, 0.90) 100%);
        border: 1px solid rgba(102, 255, 255, 1);
      }
    }
  }
}
</style>
